<template>
    <div class="wrapper">
        <div class="header">
            <div class="header-title">
                <p>特色课</p>
                <van-icon @click="$router.push('/search')" size="26px" color="#999" name="search" />
            </div>
            <van-dropdown-menu>
                <van-dropdown-item title="排序" @change="sort" v-model="value" :options="option"></van-dropdown-item>
                <van-dropdown-item title="筛选">
                    <div class="tmk">
                        <div class="tmk-item">
                            <span :class="{bg:index == dynamic}" @click="pitch(index)" v-for="(item,index) in sizerData"
                                :key="index">{{item.name}}</span>
                        </div>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <div style="height:92px"></div>
        <div class="content-box">
            <van-list v-model="loading" :error.sync="error" error-text="请求失败，点击重新加载" @load="onLoad">
                <div class="box" v-if="flag">
                    <div class="jp-box" v-for="(item,index) in listData" :key="index">
                        <div class="jp-box-item1">{{item.title}}</div>
                        <div class="jp-box-item2">共点击量</div>
                        <div class="jp-box-item3">
                            <img :src="item.cover_img" alt />
                        </div>
                        <div class="jp-box-item4">
                            <p>{{item.id}}人已报名</p>
                            <span v-if="item.price == 0">0.00</span>
                            <div v-else>
                                <span>{{item.price | num}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else>暂无课程</div>
            </van-list>
        </div>
        <navBottom></navBottom>
    </div>
    
</template>
  
<script>
import { getClassifyPort, getListDataPort, getClassifyDataPort } from '@/http/course'
export default {
    data() {
        return {
            loading: false,
            error: false,
            classifyData: [{ name: '', child: '' }, { name: '', child: '' }],
            dynamic: 0,
            dynamic2: 0,
            value: 0,
            sizerData: [
                { name: '全部' },
                { name: '大班课' },
                { name: '小班课' },
                { name: '公开课' },
                { name: '点播课' },
                { name: '面授课' },
                { name: '音频课' },
                { name: '系统课' },
                { name: '图文课' },
                { name: '会员课' },
                { name: '' },
                { name: '' }
            ],
            option: [
                { text: '综合排序', value: 0 },
                { text: '最新', value: 1 },
                { text: '最热', value: 2 },
                { text: '价格从低到高', value: 3 },
                { text: '价格从高到底', value: 4 }
            ],
            listData: [],
            page: 1,
            limit: 10,
            course_type: 0,
            classify_id: '',
            order_by: '',
            attr_val_id: [],
            is_vip: 0,
            flag: true
        }
    },
    computed: {},
    created() { },
    mounted() {
        this.gettClassify()
        this.gettListData()
        this.getScroll()
    },
    activated() {
        console.log('keepB激活')
    },
    deactivated() {
        console.log('keepB销毁')
    },
    watch: {},
    methods: {
        // 获取分类类别
        async gettClassify() {
            let res = await getClassifyPort()
            console.log(res.data.attrclassify)
            if (res.code == 200) {
                this.classifyData = res.data.attrclassify
            }

        },
        // 改变分类背景色
        pitch(i) {
            this.dynamic = i
        },
        pitch2(i) {
            this.dynamic2 = i
        },
        // 分类点击确认
        async notarize() {
            this.page = 1
            let res = await getClassifyDataPort(
                this.page,
                this.limit,
                this.course_type,
                this.classify_id,
                this.order_by,
                [this.dynamic, this.dynamic2],
                this.is_vip
            )
            console.log(res)
            if (res.code == 200) {
                this.listData = res.data.list
            }
            if (res.data.list == '') {
                this.flag = false
            } else {
                this.flag = true
            }
            this.$refs.item.toggle()
        },
        // 点击排序获取数据
        async sort() {
            console.log(this.value)
            this.page = 1
            let res = await getClassifyDataPort(
                this.page,
                this.limit,
                this.course_type,
                this.classify_id,
                this.value,
                this.attr_val_id,
                this.is_vip
            )
            console.log(res)
            if (res.code == 200) {
                this.listData = res.data.list
            }
        },
        // 滚动底部触发事件
        onLoad() {
            this.page += 1
            this.loading = true
            console.log(this.page)
            let num = 2
            if (!this.listData == '') {
                this.gettListData(num)
            }
        },
        //获取列表数据
        async gettListData(num) {
            let res = await getListDataPort(this.page, this.limit)

            if (num) {
                if (res.code == 200) {
                    this.listData = this.listData.concat(res.data.list)
                    this.loading = false
                }
                return false
            }
            if (res.code == 200) {
                this.listData = res.data.list
                this.loading = false
            }
        },
        getScroll() {
            console.log(top)
        },
        // 获取分类页面数据
        async gettClassifyData() { }
    },
    filters: {
        num(e) {
            //价钱补零
            return parseFloat(e).toFixed(2)
        },
    },
    components: {}
}
</script>
  
<style lang="scss" scoped>
.wrapper {
    width: 100%;
    background: #f4f4f4;
    box-sizing: border-box;
}

.header {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 88px;
    background: #fff;
    box-sizing: border-box;

    .header-title {
        font-size: 20px;
        text-align: center;
        position: relative;

        p {
            margin: 0;
            line-height: 44px;
        }

        .van-icon {
            position: absolute;
            top: 8px;
            right: 20px;
        }
    }
}

.tmk {
    margin: 10px;
    box-sizing: border-box;

    .tmk-item {
        width: 100%;
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
        border-bottom: 1px solid rgb(240, 238, 238);

        span {
            width: 99px;
            height: 47px;
            text-align: center;
            line-height: 47px;
            background: #f4f4f4;
            margin: 10px 23px;
        }
    }
}

.tmk-btn {
    width: 100%;
    height: 40px;
    padding: 10px 0;
    display: flex;
}

.bg {
    color: #eb6100;
    background: #e3e5fa;
}

.content-box {
    width: 100%;
}

.box {
    width: 100vw;
    box-sizing: border-box;
    padding: 0 10px 20px;
}

.jp-box {
    width: 95vw;
    height: 259px;
    display: flex;
    flex-direction: column;
    background: #fff;
    margin: 14px 0;
    padding: 0 10px;
    border-radius: 6px;

    .jp-box-item1 {
        font-size: 25px;
        // height: 47px;
        padding-top: 35px;
    }

    .jp-box-item2 {
        height: 50px;
        line-height: 50px;
        color: #999;
        font-size: 20px;
    }

    .jp-box-item3 {
        height: 65px;
        display: flex;
        align-items: center;
        color: #999;

        img {
            border-radius: 50%;
            width: 43px;
            height: 43px;
            margin-right: 15px;
        }
    }

    .jp-box-item4 {
        border-top: 1px solid rgb(243, 241, 241);
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
            margin: 0;
            width: 290px;
            color: #999;
        }

        span {
            font-size: 20px;
            color: #eb6100;
            display: flex;
            align-items: center;
        }
    }
}
</style>
